<template>
  <div class="wrapper">
      <!-- 面包屑 -->
       <a-layout>
        <a-layout>
        <a-layout-content style="padding: 0 30px">
              <div class="breadcrumb">
           <a-breadcrumb>
              <a-breadcrumb-item>首页</a-breadcrumb-item>
              <a-breadcrumb-item><a href="">项目管理</a></a-breadcrumb-item>
              <a-breadcrumb-item><a href="">项目列表</a></a-breadcrumb-item>
              <a-breadcrumb-item><a href="#">我的项目</a></a-breadcrumb-item>
            </a-breadcrumb>
            <h4>项目管理</h4>
      </div>
      <!-- 表格面板 -->
      <div class="main-wrapper">
           <a-button type="primary" class="add-btn" @click="handleAdd">
            添加用户
            </a-button>
          <a-table :columns="columns" :data-source="data">
    <a slot="name" slot-scope="text">{{ text }}</a>
    <span slot="customTitle"><a-icon type="smile-o" /> 用户名称</span>
    <span slot="tags" slot-scope="tags">
      <a-tag
        v-for="tag in tags"
        :key="tag"
        :color="tag === 'loser' ? 'volcano' : tag.length > 5 ? 'geekblue' : 'green'"
      >
        {{ tag.toUpperCase() }}
      </a-tag>
    </span>
    <span slot="action">
       <a @click="handleEdit">编辑</a>
      <a-divider type="vertical" />
      <a @click="handleDelete">删除</a>
      <a-divider type="vertical" />
       <a @click="handleOpen">启用</a>
      <a-divider type="vertical" />
       <a @click="handleDisabled">禁用</a>
    </span>
  </a-table>
      </div>
        </a-layout-content>

         <a-layout-footer style="text-align: center">
            user ©2021 Created by hujia
       </a-layout-footer>
      </a-layout>
    </a-layout>
    <a-modal v-model="visible" title="添加新用户" on-ok="handleOk" :width="800">
        <a-alert message="注意: 新添加的用户默认为已禁用状态,需要手动启用才是有效用户" 
                 banner style="margin-bottom: 5px"
        />
      <template slot="footer">
        <a-button key="back" @click="handleCancel">
          取消
        </a-button>
        <a-button key="submit" type="primary" :loading="loading" @click="handleOk">
          提交
        </a-button>
      </template>
      <a-form :form="form" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }" @submit="handleSubmit">
    <a-form-item label="用户名称">
      <a-input
        v-decorator="['user', { rules: [{ required: true, message: '用户名不能为空' }] }]"
      />
    </a-form-item>
    <a-form-item label="密码">
      <a-input
        v-decorator="['password', { rules: [{ required: true, message: '密码不能为空' }] }]"
      />
    </a-form-item>
   <a-form-item label="头像">
      <a-upload
    name="avatar"
    list-type="picture-card"
    class="avatar-uploader"
    :show-upload-list="false"
    action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
    :before-upload="beforeUpload"
    @change="handleChange"
  >
    <img v-if="imageUrl" :src="imageUrl" alt="avatar" />
    <div v-else>
      <a-icon :type="loading ? 'loading' : 'plus'" />
      <div class="ant-upload-text">
        Upload
      </div>
    </div>
    </a-upload>
   </a-form-item>
    <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
    </a-form-item>
  </a-form>
    </a-modal>
  </div>
</template>

<script>
function getBase64(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader();
    reader.readAsDataURL(file);
    reader.onload = () => resolve(reader.result);
    reader.onerror = error => reject(error);
  });
}
 
const columns = [
  {
    dataIndex: 'name',
    key: 'name',
    slots: { title: 'customTitle' },
    scopedSlots: { customRender: 'name' },
  },
  {
    title: '头像',
    dataIndex: 'avatar',
    key: 'avatar',
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime',
  },
  {
    title: '是否禁用',
    dataIndex: 'isDisabled',
    key: 'isDisabled',
  },
  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' },
  },
];

const data = [
  {
    key: '1',
    name: 'John Brown',
    avatar: '11',
    createTime: 32,
    isDisabled: '是'
  },
  {
    key: '2',
    name: 'Jim Green',
     avatar: '11',
     createTime: 32,
    isDisabled: '是'
  },
  {
    key: '3',
    name: 'Joe Black',
     avatar: '11',
     createTime: 32,
    isDisabled: '是'
  },
];
export default {
  components: {},
  props: {},
  data() {
    return {
      data,
      columns,
      loading: false,
      visible: false,
       formLayout: 'horizontal',
      form: this.$form.createForm(this, { name: 'coordinated' }),
      previewVisible: false,
      previewImage: '',
      imageUrl: '',
    };
  },
  watch: {},
  computed: {},
  methods: {
      handleAdd() {
         this.showModal();
      },
      showModal() {
         this.visible = true;
      },
    handleOk(e) {
      this.loading = true;
      setTimeout(() => {
        this.visible = false;
        this.loading = false;
      }, 3000);
    },
    handleCancel(e) {
      this.visible = false;
    },
    handleChange(info) {
      if (info.file.status === 'uploading') {
        this.loading = true;
        return;
      }
      if (info.file.status === 'done') {
        // Get this url from response in real world.
        getBase64(info.file.originFileObj, imageUrl => {
          this.imageUrl = imageUrl;
          this.loading = false;
        });
      }
    },
    beforeUpload(file) {
      const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
      if (!isJpgOrPng) {
        this.$message.error('You can only upload JPG file!');
      }
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        this.$message.error('Image must smaller than 2MB!');
      }
      return isJpgOrPng && isLt2M;
    },
    handleSubmit() {
         this.visible = false;
    },
    // 启用
    handleOpen() {
      this.$message.success('已启用');
    },
    // 禁用
    handleDisabled() {
      this.$message.success('已禁用');
    },
    // 编辑
    handleEdit() {
      this.showModal();
    },
    // 删除
    handleDelete() {
      const that = this;
      // that.$message.success('删除成功!!!!');
      // console.log(that);
      this.$confirm({
        title: '确定删除该用户?',
        content: '',
        okText: '确定',
        okType: 'danger',
        cancelText: 'No',
        onOk() {
          // console.log(this.$confirm);
          // console.log(that);
          //  that.$message.success('删除成功!!!!');
        },
        onCancel() {
          // this.$message.error('已取消删除');
          // console.log(this);
        }
      });
    }
  },
  created() {},
  mounted() {}
};
</script>
<style lang="less" scoped>
.wrapper{
    .breadcrumb {
        width: 100%;
        height: 100px;
        background-color: #fff;
        padding: 16px 32px;
        h4 {
            padding: 15px;
            font-size: 23px;
        }
        box-shadow:2px 2px 2px #ccc;
        border-bottom: 1px solid #ccc;
    }
    .main-wrapper {
        width: 100%;
        height: 500px;
        background-color: #fff;
        margin-top: 30px;
        min-height: 300px;
        padding: 15px;
        .add-btn {
            margin-bottom: 10px;
        }
    }
}
</style>